<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>7.按钮插件</title>

<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

	<link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.js"></script>

<script type="text/javascript">
	$(document).ready(function(e) {
		
		//单击按钮事件处理
        $('#btn1').click(function(e) {
			
			//正在加载状态
            $('#btn1').button('loading');
			
			//耗费时间的操作
			
			//恢复为初始状态
			window.setTimeout(function(){
				$('#btn1').button('reset');	
			},2000);
        });
		
		$('#btn2').click(function(e) {
            
			$('#btn2').button('loading');
			
			window.setTimeout(function(){
				$('#btn2').button('complete');	
			},2000);
        });
		
    });
</script>

</head>

<body>
	
    <div class="container">
    
    	<button id="btn1" type="button" class="btn btn-primary" data-loading-text="正在加载中...">单击此处1</button>
        
        <button id="btn2" type="button" class="btn btn-primary" data-loading-text="正在加载中..." data-complete-text="操作完成">单击此处2</button>


		<button type="button" class="btn btn-primary" data-toggle="button">单击切换</button>

		<br><br>

		<!-- 复选框 -->
		<div class="btn-group" data-toggle="buttons">
			<label class="btn btn-primary">
				<input type="checkbox">选项1
			</label>

			<label class="btn btn-primary">
				<input type="checkbox">选项2
			</label>

			<label class="btn btn-primary">
				<input type="checkbox">选项3
			</label>
		</div>

		<br><br>

		<!-- 单选按钮 -->
		<div class="btn-group" data-toggle="buttons">
			<label class="btn btn-warning">
				<input type="radio" name="options">选项1
			</label>

			<label class="btn btn-warning">
				<input type="radio" name="options">选项2
			</label>

			<label class="btn btn-warning">
				<input type="radio" name="options">选项3
			</label>
		</div>
    </div>
       
</body>
</html>